<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>挂单及止赢止损点计算器</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        input{
            font-weight: bold;
            color: red;
        }
        span{
            float:right;
            font-weight: bold;
        }
        #container{
            width: 800px;
            /*border:solid 1px #333;*/
            height:400px;
            
        }
        section{
            width:300px;
        }
        #left,#right{
        	margin-top:5px;
        }
        #left{        	
        	width:49%;
        	float:left;        	
        	/*border:solid 1px #333FFF;*/
        }
        #right{
        	width:49%;
        	float:right;
        	/*border:solid 1px #FFcccc;*/
        }
        #p,#p1{
        	background-color:#CCC;
        }
        #calc{
        	width:100%;
        	float:left;
        }
        #calc div{
        	width:200px;
        }
    </style>
</head>
<body>

<div id="container">
	
	<div id="left">
	    <section>
	        <div><strong>挂单建单，当前价：</strong><input id="base" size="4" maxlength="7" /></div>
	    </section>
	    <section>
	        <h2>空单</h2>
	        <div>价格：<span id="price"></span></div>
	        <div>止赢：<span id="yes"></span></div>
	        <div>止损：<span id="stop"></span><input id="len" size="1" maxlength="2" value="8" />个点</div>
	        <div>亏损4个点：<span id="p"></span></div>        
	    </section>
	    <section>
	        <h2>多单</h2>
	        <div>价格：<span id="price1"></span></div>
	        <div>止赢：<span id="yes1"></span></div>
	        <div>止损：<span id="stop1"></span><input id="len1" size="1" maxlength="2" value="8" />个点</div>
	        <div>亏损4个点：<span id="p1"></span></div>
	    </section>

	</div>
	<div id="right">
	
	    <section>
	        <div><strong>市价建单，当前价：</strong><input id="base2" size="4" maxlength="7" /></div>
	    </section>
	    <section>
	        <h2>多单</h2>
	        <div>止赢：<span id="yes3"></span></div>
	        <div>止损：<span id="stop3"></span><input id="len3" size="1" maxlength="2" value="4" />个点</div>
	    </section>
	    <section>
	        <h2>空单</h2>
	        <div>止赢：<span id="yes2"></span></div>
	        <div>止损：<span id="stop2"></span><input id="len2" size="1" maxlength="2" value="4" />个点</div>
	    </section>

	</div>
	<div id="calc">
		<section>
		        <h2>点差</h2>
		        
		        <div><input id="start" size="4" maxlength="7"  placeholder="" /> - <input id="end" size="4" maxlength="7" placeholder="" /> = <span id="result"></span></div>
		        
		 </section>
	</div>

</div>


<script>

	$('#start').keyup(function(event){
        if(event.keyCode ==13){
            var start = parseFloat($('#start').val());
            var end = parseFloat($('#end').val());
			$('#result').text(parseFloat(start-end).toFixed(2));
        }
		
	});
	$('#end').keyup(function(event){
        if(event.keyCode ==13){
            var start = parseFloat($('#start').val());
            var end = parseFloat($('#end').val());
			$('#result').text(parseFloat(start-end).toFixed(2));
        }
		
	});

	$('#base').click(function(){
		this.select();
	})
	$('#base2').click(function(){
		this.select();
	})
	$('#base').keyup(function(event){
        if(event.keyCode ==13){
        	reserve();
        }
		
	});
		$('#len').keyup(function(event){
        if(event.keyCode ==13){
        	reserve();
        }
		
	});
	$('#len1').keyup(function(event){
        if(event.keyCode ==13){
        	reserve();
        }
		
	});

	$('#base2').keyup(function(event){
        if(event.keyCode ==13){
        	market();
        }
		
	});
	$('#len2').keyup(function(event){
        if(event.keyCode ==13){
        	market();
        }
		
	});
	$('#len3').keyup(function(event){
        if(event.keyCode ==13){
        	market();
        }
		
	});
	
	$('#p').dblclick(function(){
		$('#base2').val($(this).text())
		$('#len2').val(4)
		$('#len3').val(4)
		market();
	});
	$('#p1').dblclick(function(){
		$('#base2').val($(this).text())
		$('#len2').val(4)
		$('#len3').val(4)
		market();
	});
	
	function reserve(){
		    var base = parseFloat($('#base').val());
            var len = parseInt($('#len').val());
            var len1 = parseInt($('#len1').val());
            
            //空单
            var price = base+2;
            var yes = price-2.5;
            var stop = price+len;
			var p = price+4;
			
            $('#price').text(price);
            $('#yes').text(yes);
            $('#stop').text(stop);
			$('#p').text(p);

            //多单
            var price1 = base-2;
            var yes1 = price1+2.5;
            var stop1 = price1-len1;
			var p1 = price1-4;

            $('#price1').text(price1);
            $('#yes1').text(yes1);
            $('#stop1').text(stop1);
			$('#p1').text(p1);


	}
	
	function market(){
            var base = parseFloat($('#base2').val());
            var len2 = parseInt($('#len2').val());
            var len3 = parseInt($('#len3').val());

            //空单
            var yes2 = base-2.5;
            var stop2 = base+len2;		
			var p2 = base+len2;
			
            $('#yes2').text(yes2);
            $('#stop2').text(stop2);

            //多单
            var yes3 = base+2.5;
            var stop3 = base-len3;

            $('#yes3').text(yes3);
            $('#stop3').text(stop3);
			
		
	}
	

    var width = $("#container").css("width").replace("px", ""); //css("width")这样获取的是 数字加px,
    var height = $("#container").css("height").replace("px", ""); //css("height")这样获取的是 数字加px
    $("#container").css({
        "margin-left": ($(document).width() - width) / 2,
        "margin-top": ($(document).height() - height) / 2
    });

</script>
</body>
</html>